import React, { ButtonHTMLAttributes, ReactNode } from 'react';
import './Button.css';

export type ButtonVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
export type ButtonSize = 'small' | 'medium' | 'large';

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: ButtonVariant;
  size?: ButtonSize;
  isLoading?: boolean;
  children: ReactNode;
}

const Button: React.FC<ButtonProps> = ({ 
  variant = 'primary', 
  size = 'medium', 
  isLoading = false, 
  children, 
  ...props 
}) => {
  // 构建按钮类名
  const baseClasses = 'transition-all rounded-md font-medium focus:outline-none focus:ring-2 focus:ring-offset-2';
  const variantClasses = {
    primary: 'bg-blue-600 !text-white hover:bg-blue-500 focus:ring-blue-500 focus:ring-offset-blue-50',
    secondary: 'bg-gray-100 !text-gray-900 border border-gray-300 hover:bg-gray-200 focus:ring-blue-500 focus:ring-offset-gray-50',
    success: 'bg-green-600 !text-white hover:bg-green-500 focus:ring-green-500 focus:ring-offset-green-50',
    warning: 'bg-orange-500 !text-white hover:bg-orange-400 focus:ring-orange-400 focus:ring-offset-orange-50',
    error: 'bg-red-600 !text-white hover:bg-red-500 focus:ring-red-500 focus:ring-offset-red-50',
    info: 'bg-blue-500 !text-white hover:bg-blue-400 focus:ring-blue-400 focus:ring-offset-blue-50',
  };
  const sizeClasses = {
    small: 'px-3 py-2 text-sm',
    medium: 'px-4 py-2',
    large: 'px-6 py-3 text-lg',
  };
  const loadingClass = isLoading ? 'opacity-75 cursor-not-allowed' : '';

  const className = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${loadingClass}`;

  return (
    <button
      className={className}
      disabled={isLoading || props.disabled}
      {...props}
    >
      {isLoading ? (
        <span className="flex items-center justify-center gap-2">
          <span className="inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
          <span>加载中...</span>
        </span>
      ) : (
        children
      )}
    </button>
  );
};

export default Button;